<extend name="en_us:Public:base" />
<block name="title">
    <title>Confirm order</title>
</block>
<block name="extendHead">
    <link rel="stylesheet" type="text/css" href="/Public/dist/Home/BookPage/hourbook.css?rev=0c7ffbee6d2e5d0f9bc02a7e7cf6d863">
    <link rel="stylesheet" type="text/css" href="/Public/jslib/toastr/2.1.2/toastr.min.css?rev=e36d7ff8c89b5bb6e9db66a169d59c47">
    <link rel="stylesheet" type="text/css" href="/Public/jslib/jquery-datepickermobile/daterangepicker.mobile.min.css?rev=4b8f568d231361162ae0a21b3c7f2295">
</block>
<block name="document">
    <div id="doc" class="container" data-start="{:date('Y-m-d');}">
        <div id="doc-body">
            <div class="background-F5"></div> 
            <div class="vertical-padding bottom-divider" id="book-calendar">
                <div class="nowrap-content "><span class="sure-time-icon"></span> <span class="book-date" data-hour="{:date('H')}"></span> C/I,live <span class="book-night"></span>  hours</div>
            </div>
            <form onkeydown="if(event.keyCode==13){return false;}" id="booking-container" class="form-horizontal form-sm vertical-margin">
                <div class="room-info first-room">
                    <div class="vertical-padding bottom-divider">
                        <div class="nowrap-content" style="overflow:inherit">
                            <span class="room-type-name"></span>
                            <span class="room-num-name"></span>
                            <span class="room-type-null" style="float: right;color: #333333;margin-right: 16px;position: relative;"><span class="room-name-first"></span><em  class="switchable hidden">(switch)</em>
                                <ul class="select-room hidden"></ul>
                            </span>
                        </div>
                    </div>                
                    <div class="form-group">
                         <label class="col-xs-3 control-label">
                            <include file="en_us:Public:Include_area_code" style=''  />
                        </label>
                        <div class="col-xs-9 has-action">
                            <span class="input-action-trigger input-trigger-clear iconfont icon-close hidden" id="first-close"></span>
                            <input type="text" data-tip-object="#booking-tip" maxlength="11" class="form-control input-action-clear requestMobileVal" id="requestMobile" placeholder="Please input the phone no.">
                        </div>
                    </div>
                    <div class="form-group fixed-right-container hidden" id="requestPicCodeContainer">
                        <div class="fixed-left input-group-left text-left col-xs-5" style="margin: 0;padding:0;float: left;">
                            <img id="imgcode" onclick="javascript:refreshVcode();" src="{:U('/Home/Public/imageCode');}">
                        </div>
                        <div class="input-btn-group has-action col-xs-7" style="float: right;">
                            <span class="input-action-trigger input-trigger-clear iconfont icon-close hidden"></span>
                            <input id="requestVerifiedCode" type="text" data-tip-object="#booking-tip" maxlength="4" autocomplete="off" class="form-control input-action-clear" placeholder="Security code">
                        </div>
                    </div>   
                    <div class="form-group fixed-right-container hidden" id="requestCodeContainer">
                        <div class="fixed-left input-group-left text-left col-xs-3" style="margin: 0;float: left;">
                            <div id="sendAgain" data-tip-object="#booking-tip" class="btn btn-accent btn-raised ulite-js-btn ulite-js-ripple-effect input-btn-group-btn">
                                <span class="displayTime"></span>Get code</div>
                        </div>
                        <div class="input-btn-group has-action col-xs-9" style="float: right;">
                            <span class="input-action-trigger input-trigger-clear iconfont icon-close hidden"></span>
                            <input id="requestMobileCode" type="text" data-tip-object="#booking-tip" maxlength="4" autocomplete="off" class="form-control input-action-clear" placeholder="Sms verification code">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-4 control-label" style="padding: 0;">Book people</label>
                        <div class="col-xs-8 has-action">
                          <span class="input-action-trigger input-trigger-clear iconfont icon-close hidden"></span>
                            <input type="text" data-tip-object="#booking-tip" maxlength="20" class="form-control input-action-clear requestNameVal" id="requestName" placeholder="Just fill in a name">
                        </div>
                    </div>
                    <div class="form-group request_idcard">
                        <label class="col-xs-3 control-label">ID card</label>
                        <div class="col-xs-9 has-action">
                          <span class="input-action-trigger input-trigger-clear iconfont icon-close hidden"></span>
                            <input type="text" data-tip-object="#booking-tip" maxlength="20" class="form-control input-action-clear requestIdCardVal"  id="requestIdCard" readonly="readonly" placeholder="Guest ID">
                            <div class="idcard-authentication authentication"></div>
                        </div>
                    </div>
                </div>
                <div class="background-F5" id="addRoomHtml"></div> 
                <div class="vertical-padding horizontal-padding bottom-divider top-divider  clearfix">
                    <div class="col-xs-3 col-without-padding ">Total fee</div>
                    <div class="col-xs-9 nowrap-content padding-content"><span>{$defaultSymbol}<span class="book-room-price"></span></span></div>
                </div>     
                <div class="vertical-padding horizontal-padding bottom-divider clearfix" id="div-deposit">
                    <div class="col-xs-3 col-without-padding ">Deposit</div>
                    <div class="col-xs-9 nowrap-content padding-content"><span>{$defaultSymbol}<span class="book-deposit-price"></span></span></div>
                </div> 
                <div class="vertical-padding horizontal-padding bottom-divider clearfix hidden" id="div-total">
                    <div class="col-xs-3 col-without-padding ">Total</div>
                    <div class="col-xs-9 nowrap-content padding-content"><span class="text-money">{$defaultSymbol}<span class="book-total"></span></span></div>
                </div>
                <div class="vertical-padding horizontal-padding bottom-divider clearfix" id="div-pay">
                    <div class="col-xs-3 col-without-padding" id="pay-text">Prepaid</div>
                    <div class="col-xs-9 nowrap-content padding-content"><span class="text-money">{$defaultSymbol}<span class="book-price"></span></span></div>
                </div>    
                <div class="form-group form-group-tip">
                    <div id="booking-tip" class="help-block text-center">
                    </div>
                </div>                
                <div class="row vertical-margin">
                    <button id="requestSubmit" disabled type="submit" data-tip-object="#booking-tip" class="col-xs-12 btn-primary btn-raised" style="height: 40px;">Submit</button>
                </div>
            </form>

        </div>
    </div>
    <include file="en_us:Public:Include_identification_modal"/>
    <include file="en_us:Public:Include_loading" is-hidden="" />
    <!--Hour roomTime-->
    <div class="modal" id="hourRoomModal" style="padding: 0;">
        <div class="vertical-middle-block container">
            <div class="modal-dialog modal-sm vertical-middle-block-cell modal-relative">
                <div class="modal-content">
                    <div class="modal-header">
                        <div id="hour-room-title"></div>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal">
                        <div class="form-group">
                            <label for="select-hour-checkintime" class="col-xs-3 control-label">C/I time</label>
                            <div class="col-xs-4">
                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="padding-left: 16px"><span class="select-text" id="select-hour-checkintime"></span> <span class="caret"></span></button>
                                <ul class="dropdown-menu" id="hour-ul">
                                </ul>
                            </div>
                            <label class="col-xs-1 control-label">:</label>
                            <div class="col-xs-4">
                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="padding-left: 16px"><span class="select-text" id="select-minute-checkintime"></span> <span class="caret"></span></button>
                                <ul class="dropdown-menu" id="minute-ul" style="height: 200px;overflow-y: scroll;min-width: 120px;">
                                </ul>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="select-hour" class="col-xs-3 control-label">live</label>
                            <div class="col-xs-9">
                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="padding-left: 16px"><span class="select-text" id="select-hour" data-value="2">2 hours</span> <span class="caret"></span></button>
                                <ul class="dropdown-menu">
                                    <li class="li-option" data-value="2"><a href="#">2 hours</a></li>
                                    <li class="li-option" data-value="4"><a href="#">4 hours</a></li>
                                    <li class="li-option" data-value="6"><a href="#">6 hours</a></li>
                                </ul>
                            </div>
                        </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <div class="form-group">
                            <div class="col-xs-12">
                                <button type="button" class="btn-primary btn-raised pull-left" data-dismiss="modal">Cancel</button>
                                <button type="button" class="btn-primary btn-raised pull-right" id="submitHour">OK</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/html" id="templateAddRoom">
        <div class="room-info">
            <div class="background-F5"></div> 
            <div class="vertical-padding bottom-divider">
                <div class="nowrap-content" style="overflow:inherit">
                    <span class="room-type-name"></span>
                    <span class="room-num-name"></span>
                    <span class="room-type-null" style="float: right;color: #333333;margin-right: 16px;position: relative;"><span></span>(switch)
                        <ul class="select-room hidden"></ul>
                    </span>
                </div>
            </div>                
              <div class="form-group">
                <label class="col-xs-3 control-label">
                    <include file="en_us:Public:Include_area_code" style=''  />
                </label>
                <div class="col-xs-9 has-action">
                    <span class="input-action-trigger input-trigger-clear iconfont icon-close hidden" ></span>
                    <input type="text" data-tip-object="#booking-tip" maxlength="11" class="form-control input-action-clear requestMobileVal" name="requestMobileNext" value="" placeholder="Please input the phone no.">
                </div>
            </div>
            <div class="form-group">
                <label class="col-xs-4 control-label" style="padding: 0;">Book people</label>
                <div class="col-xs-8 has-action">
                  <span class="input-action-trigger input-trigger-clear iconfont icon-close hidden"></span>
                    <input type="text" data-tip-object="#booking-tip" maxlength="20" class="form-control input-action-clear requestNameVal" id="requestName" placeholder="The default is the first person(optional)">
                </div>
            </div>        
            <div class="form-group request_idcard">
                <label class="col-xs-3 control-label">ID card</label>
                <div class="col-xs-9 has-action">
                  <span class="input-action-trigger input-trigger-clear iconfont icon-close hidden"></span>
                    <input type="text" data-tip-object="#booking-tip" maxlength="20" class="form-control input-action-clear requestIdCardVal"  readonly="readonly" placeholder="Guest ID">
                    <div class="idcard-authentication authentication"></div>
                </div>
            </div>          	
        </div>
    </script>
    <script type="text/html" id="templateAddRoomLi">
        <li class="create-li"></li>
    </script>
    <canvas class="hidden"></cancas>
</block>
<block name="extendFootJs">
    <script type="text/javascript" src="/Public/jslib/toastr/2.1.2/toastr.min.js?rev=1778e466055d4a265993e979c174c338"></script>
    <script type="text/javascript" src="/Public/dist/Home/PublicPage/identification.js?rev=23be850ea32fc94ad82d2d21a9e9d491"></script>
    <script type="text/javascript" src="/Public/dist/Home/BookPage/hourbook.js?rev=b1c284e586dfc918303deaa4a03d2be1"></script>
</block>
